<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>萧山气象局风险灾害管理平台</title>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <!--页头-->
    <div class="header"></div>
    <!--主体-->
    <div class="section">
        <!-- 主体视图-->
        <div class="sectionLeft lf w700">
            <!--选择栏-->
            <div class="selectColumn lh40">
                <form action="">
                    <input type="checkbox">风险等级
                    <input type="checkbox">地形地貌
                    <input type="checkbox">暴露性
                    <input type="checkbox">防风能力
                </form>
            </div>
            <!--视图-->
            <div class="mainView"></div>
        </div>
        <!-- 右边栏-->
        <form class="sectionRight lf w300" action="">
            <!--发布时间-->
            <div class="pubTime lh40 padLeft20 bgColor1">
                发布时间：
                <input type="text" class="w180 border">
            </div>
            <!--控制面板-->
            <div class="console">
                <h5 class="lh40 padLeft20">台风灾害</h5>
                <ul class="overflow padLeft20">
                    <li>
                        <input type="radio" name="typhoonTime" value="current" checked>当前时刻
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="oneHour">未来1小时预警
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="threeHour">未来3小时预警
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="sixHour">未来6小时预警
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="twelveHour">未来12小时预警
                    </li>
                    <li>
                        <input type="radio" name="typhoonTime" value="twentyfourHour">未来24小时预警
                    </li>
                </ul>
            </div>
            <!--按钮组-->
            <div class="btns">
                <button class="btnThreshold" type="button">预警阈值设置</button>
                <br/>
                <button>风险灾害阈值设置</button>
            </div>
        </form>
    </div>
    <!--弹出框：阈值设置-->
    <div class="threshold displayNone">
        <div class="thresholdBox">
            <div class="thresholdHeader">台风未来3小时阈值详情</div>
            <form class="thresholdSelect" action="#">
                <select>
                    <option value="1">塔楼镇</option>
                    <option value="2">Saab</option>
                    <option value="3">Opel</option>
                    <option value="4">Audi</option>
                </select>
                <select>
                    <option value="1">塔楼镇</option>
                    <option value="2">Saab</option>
                    <option value="3">Opel</option>
                    <option value="4">Audi</option>
                </select>
                <table class="thresholdTable">
                    <thead>
                    <tr>
                        <td>序号</td>
                        <td>名称</td>
                        <td>有一定风险</td>
                        <td>风险较高</td>
                        <td>风险高</td>
                        <td>风险很高</td>
                        <td>单位</td>
                    </tr>
                </thead>
                    <tbody>
                    <tr class="odd">
                        <td>1</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr class="odd">
                        <td>3</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr class="odd">
                        <td>5</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>塔楼镇</td>
                        <td>30</td>
                        <td>40</td>
                        <td>50</td>
                        <td>60</td>
                        <td>mm</td>
                    </tr>

                </tbody>
                </table>
                <div class="confirm">
                    <button class="marRight20">确认</button>
                    <button type="button" class="confirmCancel">取消</button>
                </div>
            </form>
        </div>
    </div>
    <!--js文件引入-->
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/main.js"></script>
</body>
</html>